<!--
 * new page
 * @author: YK
 * @since: 2024-06-04
 * ControlWidgets.vue
-->
<template>
  <div>
    <div class="title">组件</div>
    <draggable
      :list="initializing"
      ghost-class="ghost"
      chosen-class="chosenClass"
      @start="handleDragStart"
      @end="dragEnd"
      class="container"
      :group="{ name: 'people', pull: 'clone', put: false }"
      item-key="id"
      :clone="cloneDog"
    >
      <template #item="{ element }">
        <div class="widget">
          <component class="icon" :is="element.icon"></component>
          {{ element.name }}
        </div>
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import { useWidgetsStore, WidgetWithId } from "@/store/widgets";
import { storeToRefs } from "pinia";
import draggable from "vuedraggable";

const widgetsStore = useWidgetsStore();
const { initializing } = storeToRefs(widgetsStore);
const handleDragStart = () => {
  widgetsStore.changeDragstatusAction(true);
};
const dragEnd = () => {
  widgetsStore.changeDragstatusAction(false);
};
const cloneDog = (item: WidgetWithId) => {
  const time = new Date().getTime();
  const temp = { ...item, id: time };
  let TempItem = JSON.parse(JSON.stringify(temp));
  widgetsStore.setCurrentComponentAction(TempItem);
  return TempItem;
};
</script>

<style scoped lang="scss">
.title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 70px;
  background-color: #fff;
  height: 70px;
  border-bottom: 1px solid #f2f4f6;
}
.container {
  width: 240px;
  height: calc(100vh - 71px);
  background-color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 20px ;
  box-sizing: border-box;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    width: 0px;
  }
  .widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin: 10px 0;
    color: #666;
    &:hover {
      background-color: #3a1bc5;
      cursor: pointer;
    }
    .icon {
      font-size: 20px;
      width: 28px;
      height: 28px;
      margin-bottom: 10px;
    }
  }
  .ghost {
    background-color: #2f88ff;
  }
  .chosenClass {
    background: #fff;
  }
}
</style>
